<template>
	<view class="propo">
		<view class="bt_props" :style="{height:(type == '2' ? '660rpx' : '740rpx')}">
			<view class="filter-wrapper">
				<view class="filter-wrapper-item" v-if="type!='2'"
					style="display: flex;justify-content: space-between;flex-wrap: wrap;">
					<view style="font-size: 28upx;font-weight: bold;padding: 10px 0;flex: 1;"><text>发起人</text></view>
					<input
						class="input"
						v-model="page.CreatorRealName"
						type="text"
						placeholder="请输入发起人"
						style="flex: 3;"
					/>
				</view>
				<view class="filter-wrapper-item"
					style="display: flex;justify-content: space-between;flex-wrap: wrap;">
					<view style="font-size: 28upx;font-weight: bold;padding: 10px 0;flex: 1;"><text>流程名称</text></view>
					<input
						class="input"
						v-model="page.AppName"
						type="text"
						placeholder="请输入流程名称"
						style="flex: 3;"
					/>
				</view>
				<view style="font-size: 28upx;font-weight: bold;padding: 10px 0;"><text>流程状态</text></view>
				<view class="filter-wrapper-item"
					style="display: flex;justify-content: space-between;flex-wrap: wrap;">
					<view class="item-name" 
					v-for="item in preparation" :key="item.val"
					:class="[state==item.val? 'select-Time':'']" 
					:style="{background:(state==item.val?colorIcon:'')}"
						@tap.stop="state=item.val">{{item.txt}}</view>
				</view>
				<view style="font-size: 28upx;font-weight: bold;padding: 10px 0;"><text>发起时间</text></view>
				<view class="filter-wrapper-item">
					<text class="item-name" :class="[tapchoseTimeIndex==''? 'select-Time':'']" :style="{background:(tapchoseTimeIndex==''?colorIcon:'')}"
						@tap.stop="choseTime('0')">全部</text>
					<text class="item-name item-name-left" :class="[tapchoseTimeIndex=='1'? 'select-Time':'']" :style="{background:(tapchoseTimeIndex=='1'?colorIcon:'')}"
						@tap.stop="choseTime('1')">今天</text>
					<text class="item-name item-name-left" :class="[tapchoseTimeIndex=='2'? 'select-Time':'']" :style="{background:(tapchoseTimeIndex=='2'?colorIcon:'')}"
						@tap.stop="choseTime('2')">三天内</text>
					<text class="item-name item-name-left" :class="[tapchoseTimeIndex=='3'? 'select-Time':'']" :style="{background:(tapchoseTimeIndex=='3'?colorIcon:'')}"
						@tap.stop="choseTime('3')">一周内</text>
				</view>
				<view class="filter-wrapper-item" style="margin-top: 10px;">
					<text class="item-name" :class="[tapchoseTimeIndex=='4'? 'select-Time':'']" :style="{background:(tapchoseTimeIndex=='4'?colorIcon:'')}"
						@tap.stop="choseTime('4')">一个月内</text>
					<view class="item-name start-end-time item-name-left" style="width: 68%;">
						<picker mode="date" :end="usableEndDate"
							@change="startDateChange">
							<view class="time-picker desc" v-if="page.StartTime">{{page.StartTime}}</view>
							<view class="time-picker desc" style="color: #9f9f9f;" v-else>开始日期</view>
						</picker>
						<view class="line" style="margin: 0 40rpx;"> - </view>
						<picker mode="date" :end="usableEndDate" @change="endDateChange">
							<view class="time-picker desc" v-if="page.EndTime">{{page.EndTime}}</view>
							<view class="time-picker desc" style="color: #9f9f9f;" v-else>结束日期</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- 按钮  -->
			<view class='filter-wrapper-buttons'>
				<view class="wrapper-button">
					<view @tap.stop="filterClear" :style="{color: colorIcon,border:'1px solid'+colorIcon,background: '#f3f3f3'}">重置</view>
				</view>
				<view class="wrapper-button">
					<view @tap.stop="filterSubmit" :style="{background: colorIcon,color: '#fff',border:'1px solid'+colorIcon,}">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return {
			colorIcon:this.$oaconfig.backgroundColor,
			page: {},
			//筛选列表
			preparation: [{
					txt: '全部',
					val: ''
				},{ 
					txt: '审批中',
					val: '2'
				},
				{
					txt: '已挂起',
					val: '4'
				},
				{
					txt: '重新发起',
					val: '5'
				}
			],
			state: '',
			tapchoseTimeIndex: '',
			usableEndDate: this.$api.now(),
		}
	},
	props:{
		pageData: {
			type: Object
		},
		type: {
			type: String
		}
	},
	created() {
		this.page= JSON.parse(JSON.stringify(this.pageData));
		this.state= this.page.WorkflowInstanceState;
	},
	methods: {
		// 开始时间筛选条件
		startDateChange(e) {
		    let StartTime = e.target.value;
		    if (this.page.EndTime) {
		        let stDate = new Date(StartTime.replace("-", "/"));
		        let eDate = new Date(this.page.EndTime.replace("-", "/"));
		
		        if (stDate > eDate) {
		            this.$api.showTip('开始时间必须小于结束时间');
		            return;
		        }
		    }
		    this.page.StartTime = StartTime;
		},
		// 结束时间筛选条件
		endDateChange(e) {
		    let EndTime = e.target.value;
		    if (this.page.StartTime) {
		        let stDate = new Date(this.page.StartTime.replace("-", "/")),
		            eDate = new Date(EndTime.replace("-", "/"));
		
		        if (stDate > eDate) {
		            this.$api.showTip('结束时间必须大于开始时间');
		            return;
		        }
		    }
		    this.page.EndTime = EndTime;
		},
		choseTime(tapIndex) {
		    let now = this.$api.now();
		    this.tapchoseTimeIndex = tapIndex;
		    this.page.StartTime = '';
		    this.page.EndTime = '';
		
		    switch (tapIndex) {
		        case "0": // 全部
		            this.page.StartTime = '';
		            this.page.EndTime = '';
		            break;
		
		        case "1": // 今天
		            this.page.StartTime = now;
		            this.page.EndTime = now;
		            break;
		
		        case "2": // 三天内
		            this.page.StartTime = this.$api.targetDate({
		                type: 'day',
		                num: -3
		            });
		            this.page.EndTime = now;
		            break;
		
		        case "3": // 一周内
		            this.page.StartTime = this.$api.targetDate({
		                type: 'week',
		                num: -1
		            });
		            this.page.EndTime = now;
		            break;
		        case "4": // 一个月内
		            this.page.StartTime = this.$api.targetDate({
		                type: 'month',
		                num: -1
		            });
		            this.page.EndTime = now;
		            break;
		
		        case "5": // 三个月内
		            this.page.StartTime = this.$api.targetDate({
		                type: 'month',
		                num: -3
		            });
		            this.page.EndTime = now;
		            break;
		
		        case "6": // 半年内
		            this.page.StartTime = this.$api.targetDate({
		                type: 'month',
		                num: -6
		            });
		            this.page.EndTime = now;
		            break;
		
		        case "7": // 半年以上
		            this.page.StartTime = '';
		            this.page.EndTime = this.$api.targetDate({
		                type: 'month',
		                num: -6
		            });
		            break;
		    }
		},
		// 点击重置，切换时间
		filterClear() {
		    this.tapchoseTimeIndex = '';
		    this.page.StartTime = '';
		    this.page.EndTime = '';
			this.page.CreatorRealName= "";
			this.page.AppName= "";
			this.state= '';
		},
		// 筛选确认按钮
		filterSubmit() {
			this.page.WorkflowInstanceState= this.state;
		    this.$emit("filterSubmit", this.page)
		}
	}
}
</script>

<style lang="scss">
.propo {
	margin-top: 22rpx;
	position: fixed;
	left: 0;
	z-index: 5;
	width: 100%;
	height: auto;
	background-color: white;

	.props {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.bt_props {
		background-color: #f1f1f1;
		height: 700rpx;
		z-index: 3;

		p {
			padding: 40rpx 0pt;
			padding-left: 50rpx;
		}

		.bt_pr {
			display: row;
			flex-direction: row;
			align-items: center;
			padding: 20rpx 30rpx;
		}
	}

	p {
		padding-left: 50rpx;
	}

	.textblue {
		margin: auto 70rpx;
	}

	.preparation {
		height: 70rpx;
		padding: 5rpx 10rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		border-radius: 50px;
		background-color: rgb(247, 247, 247);
		color: #999999;
		display: inline-block;
		margin: 10rpx;
	}
}
.filter-wrapper {
	padding: 10px 20px;
}

.filter-wrapper-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.filter-wrapper-item .item-name {
	padding: 0 10px;
	background: #fff;
	border-radius: 12px;
	font-size: 28upx;
	text-align: center;
	height: 50upx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20upx;
}
.filter-wrapper-item .item-name-left{
	 margin-left: 20upx;
 }
.filter-wrapper-item .select-Time {
	color: #fff;
}

.filter-wrapper-buttons {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.filter-wrapper-buttons .wrapper-button {
	width: 100%;
	height: 80upx;
	display: flex;
	justify-content: center;
	align-items: center;

	view {
		border: 1px solid #229AFC;
		width: 300upx;
		height: 80upx;
		border-radius: 24px;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 30upx;
	}
}
</style>
